<template>
  <div>
    {{message}}
    <component-a></component-a>
  </div>
</template>
<script>
import Vue from 'Vue';
//首先创建一个名为bus的空 Vue 实例，里面没有任何内容
var bus = new Vue();
export default {
  data(){
    return{
      message: '',
    }
  },
  mounted(){
    bus.$on('on-message',(msg)=>{
      console.log('msg',msg);
      this.message = msg
    })
  },
  components:{
    'component-a':{
      template: '<button @click="handleEvent">传递事件</button>',
      methods: {
        handleEvent(){
          bus.$emit('on-message','来自组件component-a的内容');
        }
      }
    }
  }
}
</script>
<style scoped>

</style>


